<template>
    <div class="at-input" :class="[
        type === 'textarea' ? 'at-textarea' : 'at-input',
        size ? 'at-input--' + size : '',
        {
          'is-disabled': disabled,
          'at-input-group': $slots.prepend || $slots.append,
          'at-input-group--append': $slots.append,
          'at-input-group--prepend': $slots.prepend
        }
    ]">    
    <!-- @description：根据type,size等来确定此div的class名字 -->
        <template v-if="type !== 'textarea'">
            <!-- @description： 前置元素 -->
            <div class="at-input-group__prepend" v-if="$slots.prepend">
                <slot name="prepend"></slot>
            </div>
            <!-- @description： input 图标 -->
            <slot name="icon">
                <i class="at-input__icon"
                    :class="[
                      'at-icon-' + icon,
                      onIconClick ? 'is-clickable' : ''
                    ]"
                    v-if="icon"
                    @click="handleIconClick">
                </i>
            </slot>
            <input
                v-if="type !== 'textarea'"
                class="at-input__inner"
                v-bind="$props"
                :autocomplete="autoComplete"
                :value="currentValue"
                ref="input"
                @input="handleInput"
                @focus="handleFocus"
                @blur="handleBlur"
            >
            <i class="at-input__icon at-icon-loading" v-if="validating"></i>
            <!--@description： 后置元素 -->
            <div class="at-input-group__append" v-if="$slots.append">
                <slot name="append"></slot>
            </div>
        </template>
        <textarea
            v-else
            class="at-textarea__inner"
            :value="currentValue"
            @input="handleInput"
            ref="textarea"
            v-bind="$props"
            :style="textareaStyle"
            @focus="handleFocus"
            @blur="handleBlur">
        </textarea>
    </div>
</template>


<script>
/**
 *@author 金迎迎
 */
    import emitter from '../../common/mixins/emitter';
    import calcTextareaHeight from './calcTextareaHeight';
    import merge from '../../common/utils/merge';
    export default {
        /**
         *@description：设置组件的名字
         */
        name: 'at-input',
        
        componentName: 'AtInput',
        /**
            *@description：一种混合机制，用来更高效的实现组件内容的复用
            */
        mixins: [emitter],
         /**
                *@returns {Object} currentValue :返回值
                *@description：返回value值，文本框的样式
                */
        data() {
            return {
                currentValue: this.value,
                textareaCalcStyle: {}
            };
           
        },
         /**
            *@description：设置双向传递的数据的类型和默认值
            */
        props: {
            /**
                *@type {String, Number}:value 绑定值
                */ 
            value: [String, Number],
            /**
                *@type {String}:placeholder 提示信息
                */
            placeholder: String,
            /**
                *@type {String}:size 输入框尺寸，只在 type!="textarea" 时有效
                */
            size: String,
            /**
                *@type {String}:resize 控制是否能被用户缩放
                */
            resize: String,
            /**
                *@type {Boolean}:readonly 原生属性，是否只读
                */
            readonly: Boolean,
            /**
                *@type {Boolean}:autofocus 自动获取焦点
                */
            autofocus: Boolean,
            /**
                * @type {String}:icon 输入框尾部图标
                */
            icon: String,
            /**
                *@type {Boolean}:disabled   禁用
                */
            disabled: Boolean,
            /**
                *@type {String}:type 输入框类型
                */
            type: {
                type: String,
                default: 'text'
            },
            /**
                *@type {String}:name 原生属性
                */
            name: String,
            /**
                *@type {Boolean, Object}:autosize 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }
                */
            autosize: {
                type: [Boolean, Object],
                default: false
            },
            /**
               *@type {Number}:rows 输入框行数，只对 type="textarea" 有效
               */
            rows: {
                type: Number,
                default: 2
            },
            /**
               *@type {String}:autoComplete 自动补全
               */
            autoComplete: {
                type: String,
                default: 'off'
            },
            /**
               *@type {String}:form 原生属性
               */
            form: String,
            /**
               *@type {Number}:maxlength 最大输入长度
               */
            maxlength: Number,
            /**
               *@type {Number}:minlength 最小输入长度
               */
            minlength: Number,
            /**
               *@type {}:max 最大值
               */
            max: {},
            /**
               *@type {}:min 最小值
               */
            min: {},
            /**
               *@type {}:step 设置输入字段的合法数字间隔 
               */
            step: {},
            /**
                * @type {Boolean}:validateEvent 
                */
            validateEvent: {
                type: Boolean,
                default: true
            },
            /**
                * @type {Function}:onIconClick 点击 Input 内的图标的钩子函数
                */
            onIconClick: Function
        },
       
        computed: {
            validating() {
                return this.$parent.validateState === 'validating';
            },
            /**
                *@returns {Object} 
                *@description：返回文本框的样式
                */
            textareaStyle() {
                return merge({}, this.textareaCalcStyle, { resize: this.resize });
            }
            
        },
    
        watch: {
            'value'(val, oldValue) {
                this.setCurrentValue(val);
            },
            /**
            *@param{currentValue}:监听input中的值，旧值被新值覆盖
            */
            currentValue(oldValue,newValue){
                this.$emit('input', oldValue)
            } 
        },
        
        methods: {
            handleBlur(event) {
                this.$emit('blur', event);
                if (this.validateEvent) {
                    this.dispatch('AtFormItem', 'at.form.blur', [this.currentValue]);
                }
            },
            inputSelect() {
                this.$refs.input.select();
            },
            resizeTextarea() {
                if (this.$isServer) return;
                var { autosize, type } = this;
                if (!autosize || type !== 'textarea') return;
                const minRows = autosize.minRows;
                const maxRows = autosize.maxRows;
        
                this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea,  minRows, maxRows);
            },
            handleFocus(event) {
                this.$emit('focus', event);
            },
            handleInput(event) {
                const value = event.target.value;
                this.$emit('input', value);
                this.setCurrentValue(value);
                this.$emit('change', value);
            },
            handleIconClick(event) {
                if (this.onIconClick) {
                    this.onIconClick(event);
                }
                this.$emit('click', event);
            },
            setCurrentValue(value) {
                if (value === this.currentValue) return;
                this.$nextTick(_ => {
                    this.resizeTextarea();
                });
                this.currentValue = value;
                if (this.validateEvent) {
                    this.dispatch('AtFormItem', 'at.form.change', [value]);
                }
            }
        },
    
        created() {
            this.$on('inputSelect', this.inputSelect);
        },
        activated () {
            this.resizeTextarea()
        },
        mounted() {
            this.resizeTextarea();
        }
    };
</script>



